<script lang="ts" setup>
import { Modal, message } from 'ant-design-vue';

const loading = ref<boolean>(false);

const dataIsReady = ref(false);
const keyword = ref('');
const data = ref<any[]>([]);
const data2 = ref<any[]>([]);
const columns: any = [
  {
    title: '报考人姓名',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
  },
  {
    title: '考试名称',
    dataIndex: 'examName',
    key: 'examName',
    align: 'center',
  },
  {
    title: '报考人电话',
    dataIndex: 'phone',
    key: 'phone',
    align: 'center',
  },
  {
    title: '报名时间',
    dataIndex: 'registrationDate',
    key: 'registrationDate',
    align: 'center',
  },
  {
    title: '考试时间',
    dataIndex: 'examDate',
    key: 'examDate',
    align: 'center',
  },
  {
    title: '考试场次',
    dataIndex: 'examEvent',
    key: 'examEvent',
    align: 'center',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    align: 'center',
  },
  {
    title: '分数',
    dataIndex: 'score',
    key: 'score',
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'lastColumn',
    width: '10%',
    align: 'center',
    fixed: 'right',
  },
];
const columns2: any = [
  {
    title: '报考人姓名',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
  },
  {
    title: '考试名称',
    dataIndex: 'examName',
    key: 'examName',
    align: 'center',
  },
  {
    title: '报考人电话',
    dataIndex: 'phone',
    key: 'phone',
    align: 'center',
  },
  {
    title: '报名时间',
    dataIndex: 'registrationDate',
    key: 'registrationDate',
    align: 'center',
  },
  {
    title: '考试时间',
    dataIndex: 'examDate',
    key: 'examDate',
    align: 'center',
  },
  {
    title: '考试场次',
    dataIndex: 'examEvent',
    key: 'examEvent',
    align: 'center',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    align: 'center',
  },
  {
    title: '分数',
    dataIndex: 'score',
    key: 'score',
    align: 'center',
  },
];
async function getData() {
  loading.value = true;
  await getexamuserList().then((res: any) => {
    data2.value = [];
    for (let i = 0; i < res.data.length; i++) {
      let date = res.data[i].examDate;
      if (Array.isArray(date)) {
        date = date.join('-');
      }
      data2.value.push({
        name: res.data[i].name,
        phone: res.data[i].phone,
        examDate: date,
        examName: res.data[i].examName,
        id: res.data[i].id,
        personCode: res.data[i].personCode,
        registrationDate: res.data[i].registrationDate,
        score: res.data[i].score,
        status: res.data[i].status,
        examEvent: res.data[i].examEvent,
      });
    }
  }).catch(() => {
    message.error('数据获取失败！');
  })
    .finally(() => {
      loading.value = false;
    });
}

async function getData2(keyword: any) {
  loading.value = true;
  try {
    await getexamuserByPersonCode(keyword).then((res: any) => {
      data.value = [];
      for (let i = 0; i < res.data.length; i++) {
        data.value.push({
          name: res.data[i].name,
          phone: res.data[i].phone,
          examDate: res.data[i].examDate.join('-'),
          examName: res.data[i].examName,
          id: res.data[i].id,
          personCode: res.data[i].personCode,
          registrationDate: res.data[i].registrationDate,
          score: res.data[i].score,
          status: res.data[i].status,
          examEvent: res.data[i].examEvent,
        });
      }
      dataIsReady.value = true;
    });
  }
  catch (error) {
    console.error('Error fetching data:', error);
    message.error('数据获取失败！');
    data.value = []; // 确保data被设置为一个空数组
  }
  finally {
    loading.value = false;
  }
}
async function deleteSinglequarter(id: number) {
  await deleteExamuser(id).then(() => {
    message.success('删除成功！');
    getData();
    getData2(keyword.value);
  });
}

async function onDelete(id: number) {
  Modal.confirm({
    title: () => '确定要删除吗？',
    okText: () => '是的',
    okType: 'danger',
    cancelText: () => '取消',
    onOk() {
      data.value = data.value.filter((item: { id: number }) => item.id !== id);
      data2.value = data2.value.filter((item: { id: number }) => item.id !== id);
      deleteSinglequarter(id);
    },
  });
}
async function searchkeyword(keyword: string) {
  await getexamuserByPersonCode(keyword).then((res: any) => {
    data.value = [];
    for (let i = 0; i < res.data.length; i++) {
      data.value.push({
        name: res.data[i].name,
        phone: res.data[i].phone,
        examDate: res.data[i].examDate.join('-'),
        examName: res.data[i].examName,
        id: res.data[i].id,
        personCode: res.data[i].personCode,
        registrationDate: res.data[i].registrationDate,
        score: res.data[i].score,
        status: res.data[i].status,
        examEvent: res.data[i].examEvent,
      });
    }
    dataIsReady.value = true;
  });
}
async function onSearch(keyword: string) {
  Modal.confirm({
    title: () => '确定要搜索吗？',
    okText: () => '是的',
    okType: 'danger',
    cancelText: () => '取消',
    onOk() {
      data.value = data.value.filter((item: { keyword: string }) => item.keyword !== keyword);
      searchkeyword(keyword);
    },
  });
}
onMounted(() => {
  getData();
  // getData2(keyword.value);
});
</script>

<template>
  <PubPageMain class="max">
    <div class="header">
      <div class="left">
        <a-space>
          <div class="pjTitle">
            报考信息
          </div>
        </a-space>
      </div>
      <div class="right">
        <a-space>
          <a-button type="primary" @click="$router.push('/engineer_certification/index')">
            返回
          </a-button>
        </a-space>
      </div>
    </div>
    <div class="content">
      <a-table
        v-if="dataIsReady" :columns="columns" :data-source="data" row-key="id" class="d-table" :loading="loading"
        :pagination="false"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'operation'">
            <div class="editable-row-operations">
              <span>
                <a-space>
                  <a v-if="data2.length" @click="onDelete(record.id)">删除</a>
                </a-space>
              </span>
            </div>
          </template>
        </template>
      </a-table>
      <div v-if="!dataIsReady">
        <div style="display: flex;align-items: center;justify-content: center;">
          <span style="line-height: 40px;">人员编号：</span>
          <a-input-search
            v-model:value="keyword" placeholder="请输入人员编号" enter-button="确定" size="large"
            style="width: 400px;height: 40px;" @search="onSearch(keyword)"
          />
        </div>
      </div>
    </div>
    <a-divider />
    <div class="content2">
      <a-table :columns="columns2" row-key="id" :data-source="data2" class="d-table" :loading="loading" />
    </div>
  </PubPageMain>
</template>

<style lang="scss" scoped>
.max {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  max-height: 95%;
  overflow: auto;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 31px;
    margin-bottom: 10px;

    .pjTitle {
      padding-left: 15px;
      background: url("@/assets/images/title-left-bg.svg") no-repeat;
    }

    .right {
      display: flex;
      align-items: center;
    }
  }

  .content {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
    height: 95%;
    overflow: auto;
    overflow-y: auto;

    .d-table {
      flex-grow: 1;
      height: 100%;
      max-height: 100%;
      padding: 10px;
    }
  }
}

.editable-row-operations a {
  margin-right: 8px;
}
</style>
